<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-04-17 16:18:06
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-05-17 19:23:46
 * @FilePath: \vue-project\src\views\home\components\HomeBanner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from 'vue'
import HomeButton from './HomeButton.vue'
import { getBannerList } from '@/api/banner';
const className = ref(['is-show'])

//获取轮播图数据
const bannerList = ref([])
const getList = async () => {
    const res = await getBannerList()
    bannerList.value = res.data.data
}
getList()
</script>


<template>
    <div>
        <el-carousel height="680px">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                <img :src="item.url">
                <p>{{ item.url }}</p>
            </el-carousel-item>
        </el-carousel>
        <div class="position">
            <div class="introduce">
                <img src="@/assets/img/logo-tips.png" alt="">
                <p>橙券，是权益营销方案提供商，为实现品牌-市场-用户的紧密互联提供强有力的智慧支持。</p>
                <HomeButton :className="className" class="button">了解更多</HomeButton>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
div {
    .introduce {
        display: flex;
        align-items: center;
        width: 1160px;
        height: 118px;
        position: absolute;
        bottom: -80px;
        top: 700px;
        left: 50%;
        transform: translate(-50%);
        background-color: #ffffff;
        box-shadow: 0px 0px 54px 0px rgba(92, 107, 143, 0.21);

        img {
            margin-left: 36px;
            margin-right: 42px;
        }

        p {
            margin-right: 50px;
            width: 822px;
            font-size: 18px;
            letter-spacing: 0;
            font-family: PingFang-SC-Medium;
        }
    }
}

.is-show {
    display: flex;
}

.button {
    border: solid 1px #ff7200;
    color: #ff7200;
    margin-right: 34px;
}
</style>